import React from 'react';
import ReactDOM from 'react-dom';
import { Navigate, RouteContext, HashRouter, BrowserRouter, Link, NavLink, Route, Routes, Outlet } from 'react-router-dom'

/* 
HashRouter  类似于vuerouter的mode:hash
BrowserRouter 类似于vuerouter的mode:history
Link、NavLink 类似于vuerouter的router-link
Route 类似于vuerouter的router-view
*/
function Home() {
  return <>
    home
  </>
}

function List(props) {
  console.log(Navigate)
  return <>
    List
  </>
}

class App extends React.Component {

  render() {
    return <div className=''>
      <NavLink to='/home'>home</NavLink>
      <NavLink to='/list'>list</NavLink>
      <h1>------------------------</h1>
      <Routes>
        <Route path='/home' element={<Home />}></Route>
        <Route path='/list' element={<List />}></Route>
        <Outlet />
      </Routes>

    </div>;
  }
}

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'))